<template>
  <div class="buyhouse">
    <header>
      <p>
        <router-link to="/">《</router-link>
      </p>
      <p>租房</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <form>
        <select v-model="selectCurriculums">
          <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
        </select>
        <van-search v-model="search" placeholder="请输入搜索关键词" />
        <p>地图找房</p>
      </form>
      <div class="main-list">
        <img src="../../../../images/top-list.png" alt />
      </div>
      <div class="main-tab">
        <!-- <Buytab/> -->

        <!-- 筛选页 -->
        <div class="screening">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @change="screening1(value1)" />
            <van-dropdown-item v-model="value2" :options="option2" @change="screening2(value2)" />
            <van-dropdown-item v-model="value3" :options="option3" />
            <van-dropdown-item v-model="value4" :options="option4" />
          </van-dropdown-menu>
        </div>

        <div class="house">
          <div
            class="tablist1"
            v-for="(item,index) in hotRoom"
            :key="index"
            @click="houseDetail(item.id)"
          >
            <dl v-if="item.tit.includes(search)">
              <dt>
                <img :src="item.img" alt />
              </dt>
              <dd>
                <p>{{item.tit}}</p>
                <p>{{item.word}}</p>
                <p>
                  <span>{{item.sum}}万</span>
                  <span>{{item.price}}元 / m</span>
                </p>
                <p>
                  <button>{{item.type}}</button>
                  <button>{{item.orientation}}</button>
                </p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";

import Buytab from "@/components/Buytab.vue";
import { hotRoom } from "@/api/index";

export default {
  name: "index",
  components: {
    Buytab
  },
  data() {
    return {
      selectCurriculums: "北京",
      curriculums: ["北京", "上海", "山东"],
      search: "",
      hotRoom: [],

     
      value1: "户型",
      option1: [
        { text: "户型", value: "户型" },
        { text: "公寓", value: "公寓" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" }
      ],
      value2: "朝向",
      option2: [
        { text: "朝向", value: "朝向" },
        { text: "东", value: "东" },
        { text: "西", value: "西" },
        { text: "南", value: "南" },
        { text: "北", value: "北" }
      ],
      //筛选数据
      value3: "价格",
      option3: [
        { text: "价格", value: "价格" },
        { text: "1万", value: "万" },
        { text: "20-30万", value: "20-30万" },
        { text: "30-50万", value: "30-50万" },
        { text: "50-100万", value: "50-100万" },
        { text: "100万", value: "100万" }
      ],
      value4: "区域",
      option4: [
        { text: "区域", value: "区域" },
        { text: "公寓", value: "公寓" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" }
      ]


    };
  },
  created() {
    this.hotroom();
  },
  methods: {
    hotroom() {
      hotRoom().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.hotRoom = res.data.data;
        }
      });
    },
    //进入详情页
    houseDetail(id) {
      this.$router.push(`/Detail/${id}`);
    },





 //户型数据
    screening1(value) {
      axios({
        url: "/api/screening1",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.hotroom();
        } else {
          this.hotRoom = res.data.data;
        }
      });
    },

    //朝向数据
    screening2(value) {
      axios({
        url: "/api/screening2",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.hotroom();
        } else {
          this.hotRoom = res.data.data;
        }
      });
    }






  }
};
</script>

<style lang="scss" scoped>
.buyhouse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    form {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 90%;
      height: 30px;
      border-radius: 4px;
      margin: 25px 18px;
      // background-color: rgb(209, 231, 241);
      // border: 1px solid rgb(180, 180, 180);
      color: rgb(158, 158, 158);
      select {
        color: rgb(158, 158, 158);
        border: none;
        background: none;
      }
      .van-search {
        width: 200px;
        height: 40px;
        border: 1px solid rgb(187, 187, 187);
        background: none;
        .van-search__content {
          background: none;
        }
      }
    }

    .main-list {
      width: 100%;
      height: 62px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .main-tab {
      .tablist1 {
        dl {
          width: 100%;
          height: 120px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgb(221, 221, 221);
          dt {
            img {
              width: 120px;
              height: 100px;
            }
          }
          dd {
            p {
              height: 23px;
            }
            p:first-child {
              font-size: 14px;
              font-weight: 600;
            }
            p:nth-child(2) {
              font-size: 14px;
            }
            p:nth-child(3) {
              font-size: 14px;
              display: flex;
              justify-content: start;
              span:first-child {
                font-size: 14px;
                color: rgb(255, 196, 0);
              }
              span:nth-child(2) {
                font-size: 14px;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>